<template>
  <div>
    <Form layout="inline">
      <FormItem label="所属企业">
        <Select
          v-model:value="tenantCode"
          label-in-value
          placeholder="请选择所属企业"
          style="width: 200px"
          :options="tenantNameList"
          :allowClear="true"
          @change="handleChange"
        ></Select>
      </FormItem>
      <Tooltip title="查询">
        <Button type="primary" @click="fetchTenantList" shape="circle"
          ><template #icon><SearchOutlined /></template
        ></Button>
      </Tooltip>
    </Form>
    <br />
    <Table
      class="main-table"
      :bordered="true"
      :dataSource="tenantUserList"
      :columns="columns"
      :pagination="false"
      :loading="loading"
      :scroll="scroll"
    >
      <template #action="{ record }">
        <span v-per="'update'">
          <a @click="onEdit(record)"><EditOutlined /></a>
        </span>
        <Divider type="vertical" />
        <span v-per="'update'">
          <a @click="onView(record)"><EyeOutlined /></a>
        </span>
      </template>
    </Table>
    <br />
    <Pagination
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @showSizeChange="onShowSizeChange"
    />
  </div>
  <EditModal ref="modalRef" @get="fetchTenantList"></EditModal>
  <ViewModal ref="viewRef"></ViewModal>
</template>

<script setup lang="ts">
import { Table, Button, Select, Pagination, Tooltip, FormItem, Form, Divider } from 'ant-design-vue';
import { getSaaSTenantUserList, getSaaSTenantNameList } from '/@/api/tenant-mgmt/enterprise-admin';
import { reactive, ref, watch } from 'vue';
import { columns, TenantNameSelectData } from './data';
import { SaaSTenantUserListItem } from '/@/api/tenant-mgmt/model/enterpriseAdminModel';
import EditModal from './EditDrawer.vue';
import { EditOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons-vue';
import ViewModal from '/@/views/tenant-center/enterprise-admin/ViewModal.vue';

const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
let tenantUserList = ref<SaaSTenantUserListItem[]>([]);
let tenantNameList = ref<TenantNameSelectData[]>([]);
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let selectReq = reactive({
  current: current.value,
  size: pageSize.value,
  tenantCode: '',
});
const modalRef = ref(null);
const viewRef = ref(null);

let tenantCode = ref<TenantNameSelectData>(undefined);
async function fetchTenantList() {
  try {
    let res = await getSaaSTenantUserList(selectReq);
    tenantUserList.value = {};
    tenantUserList.value = res.items;

    total.value = res.total;
  } finally {
    loading.value = false;
  }
}
const onShowSizeChange = (current: number, pageSize: number) => {
  selectReq.size = pageSize;
  selectReq.current = current;
  fetchTenantList();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  selectReq.size = pageSize.value;
});
watch(current, () => {
  selectReq.current = current.value;
  fetchTenantList();
});

async function reset() {
  selectReq.tenantCode = '';
  if (tenantCode.value) {
    tenantCode.value.label = '';
  }
  fetchTenantList();
}

async function handleChange() {
  if (tenantCode.value && tenantCode.value.value) {
    selectReq.tenantCode = tenantCode.value.value;
  } else {
    reset();
  }
}

async function handleMenuClick() {
  let res = await getSaaSTenantNameList();
  res.forEach((e) => {
    tenantNameList.value.push({
      label: e.alias,
      value: e.code,
    });
  });
}

const onEdit = (user) => {
  modalRef.value.setFormState(user);
  modalRef.value.openModal();
};

const onView = (user) => {
  viewRef.value.setFormState(user);
  viewRef.value.openModal(user);
};

fetchTenantList();
handleMenuClick();
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
